<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
<style>
    *{
    padding: 0;
    margin: 0;
    list-style: none;
}
.kuang{
    width: 1200px;
    margin: 0 auto;
}
.cart {
  width: 1160px;
  height: auto;
  margin: 0 auto;
}
.cart div {
  text-align: center;
  line-height: 100px;
  color: #333;
}
.cart table {
  width: 1160px;
  border-collapse: separate;
  border-spacing: 0px 10px;
}
.cart table thead {
  height: 32px;
  line-height: 32px;
  background: #f3f3f3;
  padding-left: 5px;
  border: 1px solid #e9e9e9;
  border-top: 0;
}
.cart table tbody tr {
  border: 1px solid #e9e9e9;
}
.cart table tfoot {
  height: 32px;
  line-height: 32px;
  background: #f3f3f3;
  border: 1px solid #e9e9e9;
}
#header {
  height: 36px;
  border-bottom: 1px solid #cdcdcd;
  box-sizing: border-box;
  line-height: 35px;
  background-color: #f5f5f5;
}
#header .header_left {
  height: 35px;
  float: left;
}
#header .header_left li {
  float: left;
  height: 35px;
  margin: 0 6px;
}
#header .header_left li div {
  width: 79px;
  color: #919191;
}
#header .header_left li div span {
  font-size: 16px;
  margin-left: 7px;
  font-weight: bold;
  vertical-align: middle;
}
#header .header_left li div:hover {
  color: #ff8500;
}
#header .header_left li a {
  font-size: 12px;
  color: #919191;
}
#header .header_left li a:hover {
  color: #ff8500;
}
#header .header_right {
  height: 35px;
  float: right;
}
#header .header_right li {
  float: left;
  height: 35px;
  margin: 0 6px;
}
#header .header_right li span {
  font-size: 16px;
  margin-left: 7px;
  font-weight: bold;
  vertical-align: middle;
}
#header .header_right li i {
  font-size: 16px;
  margin-right: 5px;
  vertical-align: middle;
}
#header .header_right li a {
  font-size: 12px;
  color: #919191;
  vertical-align: middle;
}
#header .header_right li:hover {
  color: #ff8500;
}
#header .header_right li:hover a {
  color: #ff8500;
}
</style>
</head>
<body>
<div class="kuang">
    <div id="header">
        <div class="cantainer">
            <ul class="header_left">
                <li>
                   <div>
                       中国大陆<span class="iconfont icon-icon"></span>
                   </div>
                </li>
                <li>
                    <a href="#">亲，请登录</a>
                </li>
                <li>
                    <a href="#">免费注册</a>
                </li>
                <li>
                    <a href="#">手机逛淘宝</a>
                </li>
            </ul>
            <ul class="header_right">
                <li>
                   <div>
                       <a href="#">我的淘宝</a><span class="iconfont icon-icon"></span>
                   </div>
                </li>
                <li>
                    <i class="iconfont icon-gouwuche-copy"></i><a href="#">购物车</a><span class="iconfont icon-icon"></span>
                </li>
                <li>
                    <div>
                        <i class="iconfont icon-start"></i><a href="#">收藏夹</a><span class="iconfont icon-icon"></span>
                    </div>
                </li>
                <li>
                    <a href="#">商品分类</a>
                </li>
                <li>
                    <div>
                        <a href="#">千牛卖家中心</a><span class="iconfont icon-icon"></span>
                    </div>
                </li>
                <li>
                    <div>
                        <a href="#">联系客服</a><span class="iconfont icon-icon"></span>
                    </div>
                </li>
                <li>
                    <div>
                        <i class="iconfont icon-toggle"></i><a href="#">网站导航</a><span class="iconfont icon-icon"></span>
                    </div>
                </li>
            </ul>
        </div>    
    </div>

<div class="page-header">
    <h1 style="background-color: #f40;"><span class="text-primary"></span><small style="color: black;">欢迎您，<a href="javascript:;" class="btn btn-warning logout">登出</a></small></h1>
</div>

<div class="cart">
    <div></div>
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" class="all" checked="true">全选</th>
                <th>商品名称</th>
                <th>商品图片</th>
                <th>商品价格</th>
                <th>商品数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" class="one"></td>
                <td>XXX</td>
                <td><img src="" width="50" height="50"></td>
                <td>50</td>
                <td>
                    <button class="jian">-</button>
                    <input type="number" name="number" value="1">
                    <button class="add">+</button>
                </td>
                <td>50</td>
                <td><button class="remove">删除购物车</button></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td><input type="checkbox" class="all" checked="true">全选</td>
                <td></td>
                <td></td>
                <td></td>
                <td>商品总数量：<span class="totalNum">30</span></td>
                <td>总计：<span class="totalPrice">500</span></td>
                <td><button >去付款</button></td>
            </tr>
        </tfoot>
    </table>
</div>

</div>
</body>
<script src="./js/cookie.js"></script>
<script src="./js/jquery-3.4.1 .js"></script>
<script>
var username = getCookie("username");
if(username){
    document.querySelector(".page-header  span").innerText = username;
    document.querySelector(".page-header small a.logout").onclick = function(){
        removeCookie("username");
        document.querySelector(".page-header small").innerHTML = `
            <a class="btn btn-info" href="login.html">登陆</a>
            <a class="btn btn-danger" href="register.html">注册</a>
        `
    }
}
// 请求数据
var data = localStorage.getItem("data")
if(!data || data=="[]"){
   alert("购物车空空如也，请先添加物品!")
}else{
    data = JSON.parse(data);
    var arr = data.map(function(v){
        return v.id
    })    
    var ids = arr.join(",")
    $.ajax({
        url:"./server/shopping.php",
        data:{
            ids:ids
        },
        type:"post",
        dataType:"json",
        success: function(res) {
                    // console.log(res)
                    if (res.status == 200) {
                        res = res.data;
                        // console.log(res);
                        var str = '';
                        for (var i = 0; i < res.length; i++) {
                            var data1 = data.filter(function(v) {
                                return v.id == res[i].id
                            });
                            // console.log(data1);
                            var number = data1[0].number;
                            // console.log(number);
                            str += `
                        <tr data-id="${res[i].id}">
                            <td class="checkOne"><input type="checkbox" class="one" checked="true"></td>
                            <td>${res[i].name}</td>
                            <td><img src="${res[i].imgpath}" width="50" height="50"></td>
                            <td>${res[i].price}</td>
                            <td>
                                <button class="jian">-</button>
                                <input type="number" name="number" value="${number}" data-stock="${res[i].stock}">
                                <button class="add">+</button>
                            </td>
                            <td>${res[i].price * number}</td>
                            <td><button class="remove">删除购物车</button></td>
                        </tr>
                    `
                        }
                        $("tbody").html(str);
                        // 全选功能
                        // 全选功能 - 注意：应该在ajax数据的回调函数后面做-不要放到ajax外面，因为ajax是异步的
                        $(".all").click(function() {
                            if ($(this).prop("checked")) {
                                $(".one").prop("checked", true)
                                $(".all").prop("checked", true)
                            } else {
                                $(".one").prop("checked", false)
                                $(".all").prop("checked", false)
                            }
                            total();
                        });
                        // 每个小复选框点击事件
                        $(".one").click(function() {
                            var xuan = Array.prototype.slice.call($(".one")).every(function(v) {
                                return $(v).prop("checked");
                            });
                            // console.log(xuan);
                            if (xuan) {
                                $(".all").prop("checked", true)
                            } else {
                                $(".all").prop("checked", false)
                            }
                            total();
                        });
                        // 数量加减
                        $(".jian").click(function() {
                            $(this).next().val($(this).next().val() - 0 - 1);
                            if ($(this).next().val() - 0 <= 1) {
                                $(this).next().val(1)
                            }
                            // 改变本地存储中的数量
                            // console.log(data);
                            var that = $(this);
                            var brr = data.find(function(v) {
                                return v.goodid == that.parent().parent().attr("data-id");
                            });
                            brr.number = $(this).next().val() - 0;
                            // console.log(data);
                            localStorage.setItem("data", JSON.stringify(data));
                            total();
                        })
                        $(".add").click(function() {
                            // 需要获取库存
                            $(this).prev().val($(this).prev().val() - 0 + 1);
                            var stock = $(this).prev().attr("data-stock")
                            if ($(this).prev().val() - 0 >= stock) {
                                $(this).prev().val(stock)
                            }
                            var that = $(this);
                            var brr = data.find(function(v) {
                                return v.goodid == that.parent().parent().attr("data-id");
                            });
                            brr.number = $(this).prev().val() - 0;
                            // console.log(data);
                            localStorage.setItem("data", JSON.stringify(data));
                            total();
                        });
                        total();
                        // 删除购物车的操作
                        $(".remove").click(function() {
                            // 将当前这条商品从本地存储中删掉
                            // 找到当前整个商品在本地存储中的位置
                            var that = $(this);
                            var index = data.findIndex(function(v) {
                                return v.id == that.parent().parent().attr("data-id");
                            });
                            data.splice(index, 1);
                            // console.log(data);
                            localStorage.setItem("data", JSON.stringify(data));
                            $(this).parent().parent().remove();
                        });


                    } else {

                    }

                }
            })
        }


        // 计算小计、总数量、总价格的函数
        function total() {
            var totalNum = 0;
            var totalPrice = 0;
            $("[name='number']").each(function(i, v) {
                $(v).parent().next().text($(v).val() * $(v).parent().prev().text())
                    // console.log($(v).parent().siblings(".checkOne"));
                if ($(v).parent().siblings(".checkOne").children(".one").prop("checked")) {
                    totalNum += $(v).val() - 0;
                    totalPrice += $(v).parent().next().text() - 0;
                }
            });
            // console.log(totalNum);
            $(".totalNum").text(totalNum);
            $(".totalPrice").text(totalPrice);
        }
    



    // 退出登陆
    $(".have-account1 a").click(function() {
        layer.confirm('您真的想退出登陆？', {
            btn: ['确定', '取消'] //按钮
        }, function() {
            localStorage.removeItem("username");
            location.href = "login.html"

        }, function() {

        });

    })
</script>
</html>